Mobile Development with Ionic and Vue — Badge, Button, and Card

If we know how to create Vue web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with Vue.

Badge

We can add a badge with Ionic Vue.

For example, we can use the ion-badge component to add a badge:

<template>
  <ion-page>
    <ion-content>
      <ion-badge color="primary">11</ion-badge>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonBadge, IonItem, IonLabel } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonBadge, IonItem, IonLabel },
});
</script>

We can also put them in an ion-item container:

<template>
  <ion-page>
    <ion-content>
      <ion-item>
        <ion-badge slot="start">11</ion-badge>
        <ion-label>My Item</ion-label>
        <ion-badge slot="end">22</ion-badge>
      </ion-item>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonBadge, IonItem, IonLabel } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonBadge, IonItem, IonLabel },
});
</script>

The slot prop sets the position.

start is left and end is right.

Button

We can add a button with the ion-button component.

For example, we can write:

<template>
  <ion-page>
    <ion-content>
      <ion-button color="secondary">Secondary</ion-button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonButton } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
  components: { IonButton }
});
</script>

to add it.

The color prop has the color of the button.

We can disable it with the disabled prop.

And we can set the size with the size prop. We can set it to default , large , or small .

Ripple Effect

We can add a ripple effect when we click on something with the ion-ripple-effect component.

For example, we can write:

<template>
  <ion-page>
    <ion-content>
      <button class="ion-activatable ripple-parent">
        A button with an unbounded ripple effect
        <ion-ripple-effect type="unbounded"></ion-ripple-effect>
      </button>
    </ion-content>
  </ion-page>
</template>

<script>
import { IonApp, IonContent, IonRippleEffect } from "@ionic/vue";
import { defineComponent } from "vue";

export default defineComponent({
  components: { IonApp, IonContent, IonRippleEffect },
});
</script>

to add the ripple effect.

Cards

We can add cards with the ion-card component.

For example, we can write:

<template>
  <ion-card>
    <ion-item href="#" class="ion-activated">
      <ion-icon :icon="wifi" slot="start"></ion-icon>
      <ion-label>Card Link Item 1 activated</ion-label>
    </ion-item>

    <ion-item href="#">
      <ion-icon :icon="wine" slot="start"></ion-icon>
      <ion-label>Card Link Item 2</ion-label>
    </ion-item>

    <ion-item class="ion-activated">
      <ion-icon :icon="warning" slot="start"></ion-icon>
      <ion-label>Card Button Item 1 activated</ion-label>
    </ion-item>
  </ion-card>
</template>

<script>
import {
  IonCard,
  IonCardContent,
  IonCardSubtitle,
  IonCardTitle,
  IonIcon,
  IonItem,
  IonLabel,
} from "@ionic/vue";
import { pin, walk, warning, wifi, wine } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonCard,
    IonCardContent,
    IonCardSubtitle,
    IonCardTitle,
    IonIcon,
    IonItem,
    IonLabel,
  },
  setup() {
    return { pin, walk, warning, wifi, wine };
  },
});
</script>

to add the card with the items.

ion-card is the container for the card.

ion-icon has the icon.

ion-label has the label.

We can also use the ion-card-content component to add the card content:

<template>
  <ion-card>
    <ion-card-header>
      <ion-card-subtitle>Card Subtitle</ion-card-subtitle>
      <ion-card-title>Card Title</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      Keep close to Nature's heart.
    </ion-card-content>
  </ion-card>
</template>

<script>
import {
  IonCard,
  IonCardContent,
  IonCardSubtitle,
  IonCardTitle,
  IonIcon,
  IonItem,
  IonLabel,
} from "@ionic/vue";
import { pin, walk, warning, wifi, wine } from "ionicons/icons";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    IonCard,
    IonCardContent,
    IonCardSubtitle,
    IonCardTitle,
    IonIcon,
    IonItem,
    IonLabel,
  },
  setup() {
    return { pin, walk, warning, wifi, wine };
  },
});
</script>

ion-card-title has the card’s title, and ion-card-subtitle has the card’s subtitle.

Conclusion

We can add badges, buttons, and cards with Ionic Vue.